//
//  HandbookItem.swift
//  WuZhen
//
//  Created by 今安在 on 2024/3/26.
//

import SwiftUI

struct HandbookItem: View {
    var handbook: Handbook
    @State private var isShowingMappinView = false
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            RoundedRectangle(cornerRadius: 20)
                .fill(.black.opacity(0.2))
                .blendMode(.overlay)
                .frame(height: 90)
                .overlay(
                    Image(handbook.image)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .cornerRadius(20)
                        .frame(width: 160, height: 100)
                        .onTapGesture(count: 1, perform: {
                            isShowingMappinView = true
                        })
                        .sheet(isPresented: $isShowingMappinView, content: {
                            MappinViewContent(photoName: handbook.photoNameForHandbook, textTitle: handbook.textTitleForHandbook, textContent: handbook.textContentForHandbook)
                                })
                )
            Text(handbook.title)
                .fontWeight(.semibold)
                .padding(.top, 8)
                .layoutPriority(1)
            Text(handbook.subtitle)
                .font(.caption.weight(.medium))
                .foregroundStyle(.secondary)
            Text(handbook.text)
                .font(.caption.weight(.medium))
                .foregroundStyle(.secondary)
                .lineLimit(3)
            Spacer()
        }
        .padding(16)
        .frame(maxWidth: 200)
        .frame(height: 260)
        .background(.ultraThinMaterial)
        .background(
            RoundedRectangle(cornerRadius: 30)
                .fill(LinearGradient(colors: [handbook.color1, handbook.color2], startPoint: .top, endPoint: .bottomTrailing))
                .rotation3DEffect(.degrees(10), axis: (x: 0, y: 1, z: 0), anchor: .bottomTrailing)
                .rotationEffect(.degrees(180))
                .padding(.trailing, 40)
        )
        .shadow(color: .clear, radius: 0, x: 0, y: 0)
    }
}

struct HandbookItem_Previews: PreviewProvider {
    static var previews: some View {
        HandbookItem(handbook: handbooks[0])
    }
}


struct Handbook: Identifiable {
    let id = UUID()
    var title: String
    var subtitle: String
    var text: String
    var image: String
    var color1: Color
    var color2: Color
    var photoNameForHandbook : String
    var textTitleForHandbook : String
    var textContentForHandbook : String
}

var handbooks = [
    Handbook(title: "乌镇戏剧节", subtitle: "四位理想主义者的十年一梦", text: "戏剧，是10月乌镇的关键词。充满设计感的戏剧节海报、形式多样的戏剧嘉年华、风格各异的装置艺术，让乌镇充满了艺术的氛围。", image: "adv4", color1: .teal, color2: .blue, photoNameForHandbook: "adv10", textTitleForHandbook: "乌镇戏剧节", textContentForHandbook: "       乌镇戏剧节由陈向宏、黄磊、赖声川、孟京辉共同发起，文化乌镇股份有限公司主办。每年二十多部国内外特邀剧目，经典力作，展现戏剧艺术的无穷魅力；十余部青年竞演，擂台奔走，展开年轻生命力的激情角逐；上千场古镇嘉年华，五光十色，开启前所未有的大众狂欢；小镇对话，字字珠玑，聆听大师的思想火花....."),
    
    Handbook(title: "木心美术馆", subtitle: "留住列宾，留住托尔斯泰", text: "历经八年的发展，木心美术馆的业务量、观众量都已达到八年来的顶峰，我们的专业团队亟待扩容与升级，希望有不同类型的新鲜力量注入这支热爱木心文化的团队。", image: "muxin", color1: .purple, color2: .pink, photoNameForHandbook: "mapIamge3", textTitleForHandbook: "木心美术馆", textContentForHandbook: "       木心美术馆致力于纪念和展示画家、文学家、诗人木心先生（1927-2011）的毕生心血与美学遗产。这不仅是一座收藏过去时的美术馆，而且是向未来开放的精神指向和学术空间。美术馆坐落于木心的故乡乌镇，为木心的研究提供了完整的文献。木心美术馆由贝聿铭弟子、纽约OLI事务所冈本博、林兵设计督造，由文化乌镇股份有限公司出资，巨匠建设集团有限公司施工，全程历时四年； 馆内室内设计由OLI建筑设计事务所法比安主持，为期一年半。全馆建筑坐北朝南，以修长的、高度现代的极简造型，跨越乌镇元宝湖水面，与水中倒影相伴随，成为乌镇西栅一道宁静而清俊的风景线。")
]
